import Head from 'next/head';
import MemoizeCellsExample from '../../../examples/memoize-cells';
import MemoizeRowsExample from '../../../examples/memoize-rows';
import MemoizeTableBodyExample from '../../../examples/memoize-table-body';
import Box from '@mui/material/Box';

<Head>
  <title>Memoize Components Guide - Material React Table V1 Docs</title>
  <meta
    name="description"
    content="How to memoize certain table components in Material React Table in order to improve render performance."
  />
</Head>

## Memoize Components Guide

As of version 1.1, Material React Table has introduced a new `memoMode` prop that will allow you to either memoize table cells, table rows, or the entire table body in order to improve render performance on large tables.

However, memoizing these components will **BREAK** some features!

> DON'T MEMOIZE COMPONENTS UNLESS YOU KNOW WHAT YOU'RE DOING AND UNDERSTAND WHICH FEATURES WILL BREAK.

### Memoizing Table Cells

Memoizing table cells can make a small but positive impact on render performance, and it is only incompatible with a few of the dynamic features of Material React Table.

#### Cell Memoization Breaks the Following Features:

<Box color="warning.main">`density toggle, column resizing`</Box>

These features are incompatible with cell memoization because they depend on table cells being re-rendered.

#### Features That Should Still Work with Cell Memoization:

<Box color="success.main">
  `column hiding, column reordering, column pinning, editing, filtering,
  pagination, searching, sorting, row expanding, row selection, row
  virtualization`
</Box>

```jsx
<MaterialReactTable
  columns={columns}
  data={data}
  enableDensityToggle={false} //density does not work with memoized cells
  memoMode="cells" // memoize table cells to improve render performance, but break some features
/>
```

<MemoizeCellsExample />

### Memoizing Table Rows

Memoizing entire table rows can make an even more positive impact on render performance, but it is incompatible with a lot of the dynamic features of Material React Table.

#### Row Memoization Breaks the Following Features:

<Box color="warning.main">
  `density toggle, column hiding, column resizing, column reordering, column
  pinning, row expanding, row selection`
</Box>

These features are incompatible with row memoization because they require the entire row or cells to be re-rendered in order to update the UI.

#### Features That Should Still Work with Row Memoization:

<Box color="success.main">
  `filtering, pagination, searching, sorting, row virtualization,`
</Box>

```jsx
<MaterialReactTable
  columns={columns}
  data={data}
  enableDensityToggle={false} //density does not work with memoized rows
  enableHiding={false} //column hiding does not work with memoized rows
  memoMode="rows" // memoize table rows to improve render performance, but break a lot of features
/>
```

<MemoizeRowsExample />

### Memoizing Table Body

If your table never needs to re-render and you do not use any of the dynamic features of Material React Table, you can memoize the entire table body to massively improve render performance.

#### Table Body Memoization Breaks the Following Features:

<Box color="warning.main">
  `density toggle, column hiding, column resizing, column reordering, column
  pinning, row expanding, row selection, filtering (internal client-side),
  pagination (internal client-side), searching (internal client-side), sorting
  (internal client-side), row virtualization`
</Box>

None of these features will work with table body memoization because the entire table body is memoized. The table is essentially "frozen" at the first render.

#### Features That Should Still Work with Table Body Memoization:

<Box color="success.main">
  `manual server side sorting, pagination, filtering`
</Box>

```jsx
<MaterialReactTable
  columns={columns}
  data={data}
  enableColumnActions={false} //no need for column actions if none of them are enabled
  enableColumnFilters={false} //filtering does not work with memoized table body
  enableDensityToggle={false} //density does not work with memoized table body
  enableGlobalFilter={false} //searching does not work with memoized table body
  enableHiding={false} //column hiding does not work with memoized table body
  enablePagination={false} //pagination does not work with memoized table body
  enableSorting={false} //sorting does not work with memoized table body
  memoMode="table-body" // memoize table body to improve render performance, but break all features
/>
```

<MemoizeTableBodyExample />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-memo-mode-examples)**
